<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet" href="https://www.bootcss.com/p/layoutit/css/bootstrap-combined.min.css"/>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://www.jq22.com/demo/jquery-page-150527223047/jquery.simplePagination.js"/>
    <script src="https://www.jq22.com/js/pace.min.js"/>
</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <h3>
                商品类目
            </h3>
            <p>
            <form class="form-search">
                <input class="input-medium search-query" type="text"/>
                <button type="submit" class="btn">查找</button>
            </form>
            </p>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        类目名称
                    </th>
                    <th>
                        类名图片
                    </th>
                    <th>
                        创建时间
                    </th>
                    <th>
                        状态
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        TB - Monthly
                    </td>
                    <td>
                    </td>
                    <td>
                        01/04/2012
                    </td>
                    <td>
                        Default
                    </td>
                </tr>
                </tbody>
            </table>
<!--            <div class="pagination pagination-right">-->
<!--                <ul>-->
<!--                    <li>-->
<!--                        <a href="#">上一页</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">1</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">2</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">3</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">4</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">5</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">下一页</a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
            <div id="wrap1"></div>
        </div>
    </div>
</div>
</body>

<script>
    $(document).ready(function () {
        var pageNum = 1;
        var param;

        if ($(this).attr("name") == "next") {
            pageNum++
        } else {
            pageNum--
        }
        param = {pageNum: pageNum}

        $.post("/category/list", param, function (data, status) {
            var result = data.data;
            var html = "<ul><br/>";
            $.each(result.list, function (index, e) {
                html += "<li>" +
                    "   id   " + e.id +
                    "   类目名   " + e.name +
                    "   图片   <img src=\"" + e.imageSrc + "\">" +
                    // 时间戳转时间
                    "   创建时间   " + new Date(parseInt(e.createTime)).toLocaleString().replace(/:\d{1,2}$/, ' ') +
                    "</li><br/>"
            });
            html += "</ul>"
            html += "<p>当前是第" + result.pageNum + "页， 总页数：" + result.total + "，数据总条数 " + result.pages + " </p>"

            if (pageNum > result.pages) {
                pageNum = result.pages - 1;
            }
            if (pageNum <= 1) {
                pageNum = 1;
            }
            $("#show").html(html);
        });

        // var onPagechange = function(page){
        //     console.log('当前点击页码',page);
        // }
        // var obj = {
        //     wrapid:'wrap1', //页面显示分页器容器id
        //     total:18891,//总条数
        //     pagesize:10,//每页显示10条
        //     currentPage:1,//当前页
        //     onPagechange:onPagechange,
        //     //btnCount:7 页数过多时，显示省略号的边界页码按钮数量，可省略，且值是大于5的奇数
        // }
        // pagination.init(obj);
    });
</script>
</html>